<!--
 * @Description: 
 * @Author: Gaq
 * @Date: 2022-11-02 22:27:09
 * @LastEditTime: 2022-11-03 17:51:07
 * @LastEditors: Gaq
-->
<script setup>
import request from "@/utils/request";
import router from "@/router";

const userInfo = ref({});
const goodsItem = ref([]);
onBeforeMount(() => {
  userInfo.value = JSON.parse(localStorage.getItem("user"));
  const { userId } = userInfo.value;
  request.get(`/collection/getPart/${userId}`).then((res) => {
    goodsItem.value = res.data;
  });
});
const goDetail = (goodId) => {
  const routeUrl = router.resolve({
    name: "goodsdetail",
    query: { goodId },
  });
  window.open(routeUrl.href, "_blank");
};
</script>

<template>
  <div class="goodsList">
    <div
      class="goodsItem"
      v-for="(goods, index) in goodsItem"
      @click="goDetail(goods.goodsId)"
    >
      <el-card :body-style="{ padding: '0px' }">
        <img :src="goods.image" class="image" />
        <div style="padding: 10px">
          <span style="color: red; font-size: large">￥{{ goods.price }}</span>
          <div class="bottom">
            <span>{{ goods.name }}</span>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style lang="less" scoped>
.bottom {
  margin-top: 10px;
  line-height: 15px;
  display: -webkit-box;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12px;
  color: rgb(74, 72, 72);
}

.image {
  width: 100%;
  display: block;
}
.goodsList {
  display: flex;
  padding-left: 20px;
  flex-wrap: wrap;
}
.goodsItem {
  margin-right: 15px;
  width: 230px;
  height: 310px;
}
</style>